
<!--
	作者：lsd
	时间：2020-4-15
	描述：同步记录
-->
<template>
	<div class="m-view-purcheaserManager m-window">
    	<!-- 搜索头 -->
		<div class="m-condition">
			<el-row :gutter="5">
				<el-form
					:model="formSearch"
					ref="formSearch"
					label-width="70px"
					:inline-message="true"
					label-position="left">

					<el-col :span="6">
						<el-form-item label="开始时间" class="rightItem">
							<el-date-picker
								value-format="yyyy-MM-dd HH:mm:ss"
								v-model="formSearch.createDate"
								type="datetime"
								:picker-options="timeRange(createDateEnd, true)"
								placeholder="开始日期"
								align="right">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="结束时间" class="rightItem">
							<el-date-picker
								value-format="yyyy-MM-dd HH:mm:ss"
								v-model="createDateEnd"
								type="datetime"
								:picker-options="timeRange(formSearch.createDate)"
								placeholder="开始日期"
								align="right">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="5">
            <el-form-item label="类型" class="rightItem">
							<el-select v-model="formSearch.syncType" placeholder="请选择状态">
					    	<el-option
					    		v-for="item in [{name: '物料组', value: 0}, {name: '采购申请', value: 1}]"
					    		:key="item.value"
					    		:label="item.name"
					    		:value="item.name"
					    	></el-option>
					    </el-select>
						</el-form-item>
					</el-col>
				</el-form>

				<el-col :span="2" :offset="5">
					<el-button type="primary" @click="search">查询</el-button>
				</el-col>
			</el-row>
		</div>

    <!-- 表单 -->
		<div class="m-agTable m-bottom" v-loading="loading">
			<agGridComponents
				ref="agGridComponent"
				:getGridOptions="gridOptions"
				:getColumnDefs="columnDefs"
				:getRowSelection="'multiple'"
				:isColFit="true"
			></agGridComponents>
		</div>

    <!-- 页脚 -->
		<div class="m-page">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.currentPage"
				:page-sizes="[30,50,100,150,200 ]"
				:page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</div>

  </div>
</template>
  
<script>
import agGridComponents from "@/components/agGridComponents.js";
import _Api from "@/api";
import localeText from "@/i18n/agGridText";

/**
 * @group synchronizationRecord
 * 同步记录
 */
export default {
	name: 'synchronizationRecord',
	components:{
		agGridComponents,
	},
	data(){
		return {
			formSearch:{//查询表
				createDate: '',
				createDateEnd: '',
				syncType: '物料组',
			},
			createDateEnd: '',
			timeWrap:[],//储存选择时间,把第一次选择的时间变为 23:59:59
			rowData: [], // 表格数据
			//表格参数
			gridOptions: '',
			columnDefs: [],
			//页脚参数
			pageInfo: {
				pageSize: 100,
				currentPage: 1,
			},
			total: 0,
			//加载参数
			loading: false,//页面的
		}
	},
	beforeMount () {
		this.gridOptions = {
			context: {
				componentParent: this
			},
			enableColResize: true,
			localeText: localeText,
			suppressRowClickSelection: true,//单元格选中,false为选中整行
		};
		this.columnDefs = [
			{	headerName: "类型", field: "syncType", width: 100 },
			{	headerName: "状态", field: "state", width: 100,
				cellRenderer: (params) => {
					if (params.value == 0) {
						return '成功';
					} else {
						return '失败';
					}
				}
			},
			{ headerName: "备注", field: "memo", width: 200 },
			{ headerName: "同步人", field: "creator", width: 100 },
			{ headerName: "同步时间", field: "createDate", width: 150 },
		];

	},
	mounted(){
		this.search()
	},
	methods:{
		/**
		 * @vuese
		 * 查询方法
		 * 
		 * @arg 参数是布尔值， true就是点击触发，false就是非点击触发
		 */
		search(isClick){
			this.loading = true;
			this.pageInfo.currentPage = isClick ? 1 : this.pageInfo.currentPage;
			let param = {
				...this.formSearch,
				...this.pageInfo
			};
			param.createDateEnd = this.createDateEnd;

			_Api
				.getSynchronizationRecordList(param)
				.then(res => {
					this.loading = false;
					if (res.data.code == 1) {
						this.rowData = res.data.rows;
						this.total = res.data.total
						this.$refs.agGridComponent.gridOptions.api.setRowData(this.rowData);
					} else {
						this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
					}
				})
				.catch(err => {
					this.loading = false;
					this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
				});
		},

		/**
		 * @vuese
		 * 改变页脚总条数方法
		 */
		handleSizeChange (val) {
			this.pageInfo.pageSize = val;
			this.pageInfo.currentPage = 1;
			this.search();
		},

		/**
     * @vuese
     * 日期可选范围
		 * 
		 * @arg startTime参数是时间， 代表为最小时间； flag是布尔值， true为开始时间范围， false为结束时间范围
     */
		timeRange(startTime, flag){
			return {
				disabledDate(time) {
					let tempTime = new Date(startTime).getTime() || 0;
					let minTime = time.getTime();

					if(tempTime == 0){
						return time.getTime() > Date.now();
					}
					else if( flag ){
						return  time.getTime() > tempTime;
					}
					else{
						return minTime < tempTime || time.getTime() > Date.now();
					}	
				}
			}
		},

		/**
		 * @vuese
		 * 翻页方法
		 */
		handleCurrentChange (val) {
			this.pageInfo.currentPage = val;
			this.search();
		}
	},
	watch:{
		createDateEnd(val){
			if ( val == null ){
				this.timeWrap = [];
				return
			} 
			
			if( this.timeWrap.length == 0 ){
				this.createDateEnd = val.substring(0, 10) + ' 23:59:59';
			}

			this.timeWrap.push(this.createDateEnd)
		}	
	}
}
</script>
  
